<template>
    <div class="view-calendar">
        <Row class="title-top">
            <span class="mr-5">校历</span>
            <span>({{ rangeTerm }})</span>
        </Row>
        <Row class="item-title mt-20">
            <span>校历概况</span>
        </Row>
        <!--表格展示 -->
        <BaseTable :value="tableData"></BaseTable>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
import BaseTable from "@components/iv-table/BaseTable.vue";
@Component({
    components: {
        BaseTable
    }
})
export default class ViewCalendar extends Tools {
    /**
     * 计算属性
     */
    private get rowData() {
        return this.$route.params;
    }

    private get tableData() {
        const {
            code,
            name,
            semesterYear,
            semesterNumber,
            weeks,
            dateStart,
            dateEnd,
            dateStartTeaching,
            dateEndTeaching,
            dateCheckinStaff,
            dateCheckinStudent
        } = this.rowData;

        return [
            { name: "编码", value: code },
            { name: "名称", value: name },
            { name: "学年", value: semesterYear },
            { name: "学期", value: semesterNumber },
            { name: "周数", value: weeks },
            { name: "", value: "" },
            { name: "开始日期", value: dateStart },
            { name: "结束日期", value: dateEnd },
            { name: "教学开始日期", value: dateStartTeaching },
            { name: "教学结束日期", value: dateEndTeaching },
            { name: "教师报到日期", value: dateCheckinStaff },
            { name: "学生报到日期", value: dateCheckinStudent }
        ];
    }

    private get rangeTerm() {
        let { dateStart, dateEnd } = this.rowData;
        return `${dateStart} ~ ${dateEnd}`;
    }
}
</script>
<style lang="stylus" scoped>
.view-calendar {
  .title-top {
    box-sizing: border-box
    font-size: 16px
    color: $base-color
    font-weight: 600
  }
  .item-title {
    margin-top: 20px
    margin-bottom: 5px
    color: $text-color
    font-weight: 600
  }
}
</style>
